<template>
  <el-descriptions :column="2" border class="basic-descriptions">
    <el-descriptions-item
      label="主域名"
      label-align="left"
      align="left"
      :span="2"
      label-class-name="bg-[#F7F8FA]"
    >
      {{ emptyText(props.record?.primary_domain) }}
    </el-descriptions-item>
    <el-descriptions-item
      label="其他域名"
      label-align="left"
      align="left"
      :span="2"
      label-class-name="bg-[#F7F8FA] w-[130px]"
    >
      <div class="w-[600px]">
        {{ emptyText(props.record?.domain_list?.join(',')) }}
      </div>
    </el-descriptions-item>
    <el-descriptions-item
      label="证书主体名称(CN)"
      label-align="left"
      align="left"
      label-class-name="bg-[#F7F8FA]"
    >
      {{ emptyText(props.record?.type) }}
    </el-descriptions-item>
    <el-descriptions-item
      label="颁发组织"
      label-align="left"
      align="left"
      label-class-name="bg-[#F7F8FA]"
    >
      {{ emptyText(props.record?.organization) }}
    </el-descriptions-item>
    <el-descriptions-item
      label="生效时间"
      label-align="left"
      align="left"
      label-class-name="bg-[#F7F8FA]"
    >
      {{ formatUnix(+props.record?.start_date!) }}
    </el-descriptions-item>
    <el-descriptions-item
      label="过期时间"
      label-align="left"
      align="left"
      label-class-name="bg-[#F7F8FA]"
    >
      {{ formatUnix(+props.record?.expire_date!) }}
    </el-descriptions-item>
    <el-descriptions-item
      label="申请方式"
      label-align="left"
      align="left"
      label-class-name="bg-[#F7F8FA]"
    >
      {{ getOptionsLabel(applyMethodOptions, props.record?.provider!) }}
    </el-descriptions-item>
    <el-descriptions-item
      v-if="props.record?.provider === 'dns_account'"
      label="DNS账号"
      label-align="left"
      align="left"
      label-class-name="bg-[#F7F8FA]"
    >
      <section class="flex items-center gap-x-[6px]">
        {{ emptyText(props.record?.dns_account?.name) }}
        <div
          class="px-2 bg-[#E8F3FF] text-[#165DFF] text-xs/5 rounded ml-[6px]"
        >
          {{ emptyText(props.record?.dns_account?.type, '') }}
        </div>
      </section>
    </el-descriptions-item>
    <el-descriptions-item
      v-if="record?.provider !== 'self_signed'"
      label="Acme账号"
      label-align="left"
      align="left"
      label-class-name="bg-[#F7F8FA]"
    >
      {{ emptyText(props.record?.acme_account?.email) }}
    </el-descriptions-item>
  </el-descriptions>
</template>
<script lang="ts" setup>
import type { CertDetailModel } from '@/apis/model/cert'
import { applyMethodOptions } from '@/config/constant/cert'

interface IProps {
  record: CertDetailModel
}
const props = defineProps<IProps>()
</script>

<style lang="scss" scoped></style>
